<template xmlns:el-col="http://www.w3.org/1999/xhtml">
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 上架产品
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>












        <div class="container">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" >
                <el-row >
                <el-col :span="5" >
                <el-form-item label="产品名称：" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="普通用户价格：" >
                            <el-input />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="+" >
                            <el-input />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5">
                        <el-form-item label="退役军人价格：" >
                            <el-input />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="+" >
                            <el-input />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row >
                    <el-col :span="5" >
                <el-form-item label="起批量：" >
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-select v-model="amount" placeholder="请选择">
                            <el-option
                                    v-for="item1 in options1"
                                    :key="item1.value1"
                                    :label="item1.label1"
                                    :value="item1.value1">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row >
                    <el-col :span="5" >
                        <el-form-item label="单人限购：" >
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="瓶"></el-form-item>
                    </el-col>
                </el-row>



            </el-form>
        </div>















    </div>
</template>

<script>
    import { fetchData } from '../../../api/index';
    export default {
        name: 'basetable',
        data() {
            return {
                ruleForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                amount:null,
                rules: {
                    name: [
                        {required: true, message: '请输入产品名称', trigger: 'blur'},
                    ],
                },

                options1: [{
                    value1: '瓶/起',
                    label1: '瓶/起'
                }, {
                    value1: '斤/起',
                    label1: '斤/起'
                }],



            };
        },
        created() {
            this.findPage();
        },
        methods: {
            //多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //批量删除
            deleteArr(){
                this.$confirm("你确定要删除当前数据吗？", "提示", {//确认框
                    type:'warning'
                }).then(()=>{
                    this.multipleSelection.forEach(selectedItem=>{
                        this.axios.delete("http://localhost:12005/product/deleteProductById?goods_id="+selectedItem.goods_id).then((res) => {
                            if (res.data.isFlag) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.message
                                });
                                //重新进行分页查询
                                this.findPage();
                            }else{
                                //执行失败
                                this.$message.error(res.data.message);
                            }
                        })
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                })
            },


            deleteOne(row){
                this.$confirm("你确定要删除当前数据吗？", "提示", {//确认框
                    type:'warning'
                }).then(()=>{
                    this.axios.delete("http://localhost:12005/product/deleteProductById?goods_id="+row.goods_id).then((res) => {
                        if (res.data.isFlag) {
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            });
                            //重新进行分页查询
                            this.findPage();
                        }else{
                            //执行失败
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                })
            },

            //根据条件查询并分页
            findPage(){
                var param = {
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize,
                    status:this.pagination.status,
                    queryString: this.pagination.queryString
                };
                this.axios.get("http://localhost:12005/product/findByPage?pageIndex=" + param.pageIndex + "&pageSize=" + param.pageSize + "&goods_status="+param.status+"&queryString="+param.queryString).then((res) => {
                    this.pagination.total = res.data.data.totalData;
                    this.dataList = res.data.data.data;
                })
            },



            handleCurrentChange(pageIndex) {
                //设置最新的页码
                this.pagination.pageIndex = pageIndex;
                //重新调用findPage方法进行分页查询
                this.findPage();
            },

            // 弹出编辑窗口
            handleEdit(row) {
                //弹出编辑窗口
                this.dialogFormVisible4Edit = true;
                //回显数据，发送ajax请求根据ID查询当前检查项数据
                this.axios.get("http://localhost:12005/product/getProductById?goods_id=" + row.goods_id).then(res => {
                    if (res.data.isFlag) {

                        //进行回显，基于VUE的数据绑定实现
                        this.formData = res.data.data;
                    }
                    else {
                        //查询失败，弹出提示
                        this.$message.error(res.data.message);
                    }
                })
            },






























            // 获取 easy-mock 的模拟数据
            getData() {
                fetchData(this.query).then(res => {
                    console.log(res);
                    this.tableData = res.list;
                    this.pageTotal = res.pageTotal || 50;
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                    })
                    .catch(() => {});
            },

            delAllSelection() {
                const length = this.multipleSelection.length;
                let str = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error(`删除了${str}`);
                this.multipleSelection = [];
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                this.$set(this.tableData, this.idx, this.form);
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
